<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="list"></div>
</body>
</html>
<script>
     function news(cb) {
        //1.创建一个请求对象
        let xhr = new XMLHttpRequest()

        //2.配置请求
        xhr.open("get", "./data.json")

        //3.设置回调函数
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                cb(JSON.parse(xhr.responseText))

            }
        }

        //4.发送请求
        xhr.send()

    }
    news(function(data){
        console.log(data);
        let str = data.list.map((item, index) => {
                return `<div>${item.id}${item.name}</div>`
            }).join("")
            document.querySelector(".list").innerHTML = str
    })
</script>